<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" conten年t="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.js"></script>
    <style type="text/css">
        #bottle{
            width:150px;
            height: 500px;
            margin: 0 auto;
            background:url(001.png) center no-repeat;
            background-size:80%;
        }
        #bottle.burst{
            background-image:url(002.png);
        }
        #state{
            color: red;
            text-align:center;
        }
        #bottle-health{
            width: 200px;
            border: 2px solid rgb(99, 12, 73);
            margin:0 auto 20px auto;
        }
        #bottle-health div{
            height: 10px;
            background: pink;
        }
       #controls{
           width: 200px;
           margin: 0 auto;
       }
       #controls button{
           margin-left: 20px;
       }
    </style>
</head>

<body>
    <div id="app">
        <!-- 图片 -->
        <div id="bottle" v-bind:class="{burst:boole}"></div>
        <!-- 提示破碎信息 -->
        <div id="state">{{state}}</div>
        <div id="bottle-health">
            <div v-bind:style="{width:health+'%'}"></div>
        </div>
        <!-- 控制按钮 -->
        <div id="controls">
            
            <button v-on:click="beat" v-show="!boole">敲瓶子</button>
           <button v-on:click='restart'>重新开始</button>
        </div>
    </div>


    <script>
       
        new Vue({
            el:'#app',
            data:{
               health:100,
               boole:false,
                state:''
            },
            methods:{
               beat:function(){
                   this.health-=10;
                   if( this.health<10){
                    this.boole=true; 
                    this.state='瓶子碎了'
                   }
               },
             restart:function(){
                    this.health=100;
                    this.boole=false;
                    this.state=''
                }
            }
        
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<!-- <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" conten年t="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.js"></script>
  
        <style>

#bottle{
width:150px;
/*定义宽度*/
height: 500px;
/*定义高度*/
margin: 0 auto;
/*定义外边距*/
background: url(001.png) center no-repeat; 
background-size: 80%;
}
/*定义背景图片尺寸*/

#bottle.burst{
background-image:url(002.png);
/*定义背景图片*/
}
#state{
color: red;
/*定义字体颜色*/
text-align: center;
/*定义水平居中*/
}
#bottle-health{
width:200px;
/*定义宽度*/

border: 2px solid #000;

/*定义边框*/
margin:0 auto 20px auto;
/*定义外边距*/
}
#bottle-health div{

height:10px;

/*定义高度*/

background: #dc2b57;

/*定义背景颜色*/
}
#controlsf{
width: 200px;
/*定义宽度*/
margin: 0 auto;
/*定义外边距*/
}
#controls button{

margin-left: 20px;

/*定义左侧外边距*/
}
</style>
</head>

<body>
    <div id="app">-->

        <!--图片-->
        
        <!-- <div id="bottle" v-bind:class="{ burst:boole }"> </div>
        
        <div id="state">{{ state }}</div>
        
    
        
        <div id= "bottle-health">
        
        <div v-bind:style="{ width:health + '%' }"> </div></div>
        
 
        
        <div id="controls">
        
        <button v-on:click="beat" v-show="!boole">敲瓶子</button>
        
        <sbutton v-on:click= "restart">重新开始</button></div>
        
        </div> -->
<!-- <script>
        
        new Vue({
        
        el: '#app',
        
        data:{
        
        health:100,// 定义破坏的进度条boole:false,
        
        state:""
        
        },
        
        methods:{
        
        beat:function () {
        
        this.health-= 10;
        
        //每次单击按钮触发beat方法，health 宽度减小10%
        
        if (this.health<=0){
        
        this. boole=true;//当this.health<=0时，this. boole的值true，应用burst类更换
        
        this.state="瓶子被敲碎了"
        
        }
        
        },
        
        //重新开始
        
        restart:function(){
        
        this.health=100; // 进度条恢复100
        
        this.boole=false; //this.boole 回到定义时的值( false)， 显示瓶子没破坏前图片this.state="//提示“瓶子被敲碎”信息
        
        }
        }
        })
        
        </script>
</body>

</html>  -->